<template>
  <Menu class="menu-box" :accordion="true">
    <MenuGroup class="pt" title="文档">
      <MenuItem class="indent" name="introduce">前言</MenuItem>
      <MenuItem class="indent" name="fast">快速上手</MenuItem>
      <MenuItem class="indent" name="environ">环境部署</MenuItem>
      <MenuItem class="indent" name="port">接口文档</MenuItem>

      <Submenu name="project">
        <template slot="title">
          <div class="sub-indent">项目介绍</div>
        </template>
        <MenuItem name="p1">项目一</MenuItem>
        <MenuItem name="p2">项目二</MenuItem>
        <MenuItem name="p3">项目三</MenuItem>
      </Submenu>
    </MenuGroup>
    <MenuGroup class="pt" title="其他">
      <MenuItem name="quest">常见问题</MenuItem>
      <MenuItem name="donate">捐赠支持</MenuItem>
      <MenuItem name="vip">成为会员</MenuItem>
    </MenuGroup>
  </Menu>
</template>

<script>
    export default {
        name: 'Menubar'
    }
</script>

<style lang="scss" scoped>
.menu-box /deep/ {
  .ivu-menu-item-group-title{
    font-weight: 600;
    color: #000;
    font-size: 16px;
  }
  .indent{
    padding-left: 40px;
    color: #000;
  }
  .sub-indent{
    padding-left: 16px;
    color: #000;
  }
}
</style>
